<template>
  <div class="bank-container ptop bgwhite">
    <m-header title="银行卡" :preventBack="true" @navback="handleBack">
      <span slot="right" clas="concat" @click="handleService">联系客服</span>
    </m-header>
    <div class="bank-img">
      <img src="../../../assets/imgs/mine/yinlian@2x.png" alt>
    </div>
    <div class="bank-list">
      <div
        class="bank-item"
        v-for="(item, index) in bankCardList"
        :key="index"
        @click="toWidthdraw(item.member_account_id)"
      >
        <div class="bank-name">{{item.card_name}}</div>
        <div class="bank-code">{{item.card_no | fmatcard}}</div>
        <!-- <div class="bank-code">6217 **** **** **** 998</div> -->
      </div>
    </div>
    <div class="add-bank" @click="addBankCard">
      <span>添加银行卡</span>
    </div>
    <div class="rules">
        <p>温馨提示：</p>
        <p>1.同一会员账户每日仅首次提现免手续费。</p>
        <p>2.提现金额24小时内到账，提现银行需为储蓄卡。</p>
        <p>3.为防止套现洗钱行为，会员充值后余额需全额投注后方可提现。</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  components: {},
  data () {
    return {
      bankData: {
        // account_list: [
        //   {
        //     member_account_id: '1',
        //     card_no: '232143443',
        //     card_name: '招商银行',
        //     account_site: '哈哈哈哈哈',
        //     account_branch: '文一西路支行',
        //     create_time: '2018-12-29 22:32:58'
        //   }
        // ]
        // balance: '23183.00',
        // isFirst: 0
      },
      bankCardList: [], // 银行卡列表
      isFirst: 0 // 首次提现
    };
  },
  filters: {
    fmatcard (val) {
      const reg = /^(\d{4})\d+(\d{4})$/;
      return val.replace(reg, '$1 **** **** **** $2');
    }
  },
  mounted () {
    this.getBankInfo();
  },
  methods: {
    ...mapActions({
      withdrawApply: 'mine/withdrawApply'
    }),
    getBankInfo () {
      this.withdrawApply({}).then(res => {
        if (res) {
          console.log(res);
          this.bankCardList = res.account_list || [];
          // this.isFirst = res.isFirst;
          this.isFirst = 1;
        }
      });
    },
    addBankCard (isFirst) {
      const query = {};
      if (this.isFirst) {
        query.isFirst = this.isFirst
      }
      this.$router.push({ path: '/bank/add', query });
    },
    toWidthdraw (accountId) {
      this.$router.push({ path: '/bank/withdraw', query: { accountId } });
    },
    handleService () {
      this.$vux.toast.text('如您在使用本站时、遇到任何问题请联系您的代理员');
    },
    handleBack () {
      if (this.$route.query.type) {
        this.$router.go(-1);
      } else {
        this.$router.replace({path: '/mine'});
      }
    }
  }
};
</script>
<style lang="less" scoped>
.bank-container {
  .bank-img {
    display: flex;
    justify-content: center;
    img {
      width: 2.38rem;
      margin-top: 0.6rem;
    }
  }
  .bank-list {
    .bank-item {
      height: 0.8rem;
      margin: 0.4rem 0.5rem 0;
      padding: 0 0.18rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #3f8feb;
      border-radius: 0.06rem;
      .bank-name,
      .bank-code {
        font-size: 0.3rem;
        color: #ffffff;
        letter-spacing: 0.0133rem;
      }
    }
  }
  .add-bank {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    span {
      display: inline-block;
      padding: 0.1rem;
      font-size: 0.3rem;
      color: #3f8feb;
    }
  }
  .rules {
    margin: 0.4rem 0.5rem;
    color: #999;
    p {
      line-height: 1.5;
    }
  }
}
</style>
